<template>
  <button @click="btnClick">Toggle</button>
  <!-- 添加或者删除动画的时候才会加动画 -->
  <!-- <transition name="fade"> -->
  <!-- 自定义class 点复制 -->
  <transition
    enter-active-class="animate__animated animate__rubberBand"
    leave-active-class="animate__animated animate__backOutUp"
  >
    <div class="dong-hua" v-if="isShow">前程似锦</div>
  </transition>
</template>
<script setup>
import { ref } from "vue";
const isShow = ref(true);
function btnClick() {
  isShow.value = !isShow.value;
}
</script>
<style scoped>
.dong-hua {
  display: inline-block;
  background-color: aqua;
}

/* .fade-enter-active {
  animation: backInDown 1s ease;
}
.fade-leave-active {
 
  animation: backInDown 1s ease reverse;
} */
</style>
